//会员价导入弹窗
import { useState, useEffect } from 'react';
import CommonModal from '@/components/CommonModal';
import { Button, Upload } from 'antd';
import { Base64 } from 'js-base64';
import { getToken } from '@/utils/authority';
import { httpChange } from '@/utils/utils.jsx';
import styles from '../index.module.less';

const clientId = 'sword'; // 客户端id
const clientSecret = 'sword_secret'; // 客户端密钥

const ExportModal = ({ visible, handleCancel, handleOk }) => {
  const [loading, setloading] = useState(false);
  const [file, setFile] = useState({}); //上传的文件值
  const [fileKey, setFileKey] = useState(''); // upload添加key每次关闭的时候会通过key去更新
  const headers = {
    Authorization: `Basic ${Base64.encode(`${clientId}:${clientSecret}`)}`,
    'Blade-Auth': getToken(),
  };

  useEffect(() => {
    if (visible) {
      setFile({});
      setFileKey(Math.random());
    }
  }, [visible]);

  //文件上传
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setloading(true);
      return;
    }
    if (info.file.status === 'done') {
      setFile(info.file.originFileObj);
      setloading(false);
    }
  };

  //删除文件
  const handleRemove = (info) => {
    setFile({});
    // setFileKey(Math.random());
  };

  //提交
  const onOk = () => {
    handleOk(file);
  };

  return (
    <CommonModal
      title="会员价导入"
      visible={visible}
      onCancel={handleCancel}
      width="600px"
      footer={
        <>
          <Button onClick={handleCancel}>取消</Button>
          <Button onClick={onOk} type="primary">
            确定上传
          </Button>
        </>
      }
    >
      <>
        <div className={styles.tipBox}>
          <p>①.每个表格导入最多只支持1万条数据，超出的不会导入内容</p>
          <p>②.导入匹配按{APP_TITLE}SKU编码进行匹配，匹配不到的将不会导入</p>
          <p>③.会员价不能重复申请，已申请的会员价不能在重新申请</p>
        </div>
        <div className={styles.selectFile}>选择文件：</div>
        <div className={styles.upLoadBox}>
          <div key={fileKey}>
            <Upload
              name="file"
              data={{ type: 'QINIU' }}
              headers={headers}
              accept=".xls,.xlsx"
              disabled={loading}
              maxCount={1}
              action={`${httpChange(UPLOAD_SERVER)}/zjf-oms/files/uploadFile`}
              onChange={handleChange}
              onRemove={handleRemove}
            >
              <Button style={{ marginRight: '16px' }}>文件上传</Button>
            </Upload>
          </div>
          <div className={styles.downButton}>
            <Button>
              <a href="https://goods-template.zhaojiafang.com/goods/template/会员价导入模板.xlsx">
                下载模板
              </a>
            </Button>
          </div>
        </div>
      </>
    </CommonModal>
  );
};

export default ExportModal;
